<template>
	<view class="content">
		<!-- tab栏 -->
		<view class="ffffff" v-if="listtype!=1">
			<u-tabs :list="tabList" @click="tabchange" lineWidth="60rpx" lineColor="rgba(255, 184, 0, 1)" :activeStyle="{
			  color: '#000000',
			  fontWeight: 800,
			  transform: 'scale(1.05)'}" :inactiveStyle="{
			  color: '#666666',
			    transform: 'scale(1)'
			}"></u-tabs>
		</view>
		<view class="mainpadding">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
			</view>
			<view class="margin_bottom3" v-for="item in list.data" :key="item.shop_id">
				<view class="flexleft">
					<image class="shopImg margin_right2" src="/static/goods.png" mode=""></image>
					<view class="color_ling text_x">{{item.shop_name}}</view>
				</view>
				<view class="margin_top couponBox mainpadding flexleft" v-for="value in item.yhq_list" :key="value.id"  @click="goShopInfo(item.shop_id,value)">
					<view class="text margin_right4">
						<view>
							<text class="price">$</text>
							<text class="price" style="font-size: 46rpx;">{{value.shop_rall.di_money}}</text>
						</view>
						<view class="color_jiu text_b margin_top2">滿{{value.shop_rall.di_money}}可用</view>
					</view>
					<view class="line margin_right4"></view>
					<view class="flex1 flexbetween">
						<view>
							<view class="color_ling text_weight" style="margin-bottom: 35rpx;">{{value.shop_rall.name}}</view>
							<view class="color_jiu text_b">有效期至{{http.returnDate(value.shop_rall.endtime*1000)}}</view>
						</view>
						<view class="use">
							立即使用
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				tabsid: 0,
				tabList: [{
					name: "未使用",
					id: 0,
				}, {
					name: "已使用",
					id: 1,
				}, {
					name: "已過期",
					id: 2,
				}],
				list: {
					data: []
				},
				listtype:0,//1選擇優惠券
				shop_id:"",
				allprice:0
			}
		},
		onLoad(options) {
			if(options.type){
				this.listtype = options.type
				this.shop_id = options.shop_id
				this.allprice = options.allprice
			}
			this.getlist()
		},
		methods: {
			goShopInfo(id,value) { //店鋪詳情
				if(this.listtype==1){//選擇優惠券了
					if(Number(value.shop_rall.di_money) > Number(this.allprice)){
						// this.http.toast("當前免運券需滿"+value.shop_rall.di_money+"可用")
						httpRequest.modal('提示', "當前免運券需滿" + value.shop_rall.di_money + "可用", true, (resp) => {})
						return false
					}else{
						let data = {
							ship_id:value.shop_rall.id,
							name:value.shop_rall.name
						}
						uni.$emit("selectmyq",data)
						uni.navigateBack(1)
					}
				}else{
					uni.setStorageSync("shop_id", id)
					uni.redirectTo({
						url: "/pages_index/shopInfo?id=" + id
					})
				}
			},
			tabchange(e) {
				this.tabsid = e.id
				this.getlist()
				this.list.data = []
			},
			getlist() { //獲取個人信息
				let _this = this
				let url = "/api/member/myyun"
				let data = {
					type: this.tabsid
				}
				if(this.listtype==1){
					url = "/api/ordergoods/getyun"
					this.$set(data,"shop_id",this.shop_id )
				}
				this.http.request(url, 'POST', data).then(res => {
					if (res.code == 1) {
						let shoparr = []
						res.data.forEach(item => {
							shoparr.push({
								shop_id: item.shop_id,
								shop_name: item.shop.name,
								yhq_list: []
							})
						})
						let map = new Map();
						for (let item of shoparr) {
							if (!map.has(item.id)) {
								map.set(item.id, item);
							};
						};
						let setshoparr = [...map.values()]
						setshoparr.forEach(ite => {
							res.data.forEach(item => {
								if (item.shop_id == ite.shop_id) {
									ite.yhq_list.push(item)
								}
							})
						})
						console.log(setshoparr, "99999999");
						this.list.data = setshoparr

					} else if (res.code == 0) {
						this.http.toast(res.msg)
					} else {
						this.http.toast('系統處理中，請稍後再試');
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-tabs__wrapper__nav__item {
		flex: 1;
		white-space: nowrap;
	}

	::v-deep.u-tabs {
		padding: 0 20rpx;
	}

	.shopImg {
		width: 44rpx;
		height: 44rpx;
		min-width: 44rpx;
		background: #D9D9D9;
		border-radius: 50%;
	}

	.couponBox {
		// width: 702rpx;
		height: 160rpx;
		background-color: rgba(255, 232, 207, 1);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		box-sizing: border-box;
	}

	.price {
		font-size: 25rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #FF5C00;
	}

	.line {
		width: 0;
		height: 52rpx;
		border-right: 1rpx solid #999999;
	}

	.use {
		width: 132rpx;
		height: 49rpx;
		text-align: center;
		line-height: 49rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 1rpx solid #FF8505;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
	}
</style>